// pages/category/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //左侧列表区域数据
    leftMenuList:[],
    //右侧内容区域数据
    rightDataList:[],
    //当前选中的item
    currentIndex: 0,
    //滚动位置初始化
    scrollTop:0
  },
  //定义个当前页面的全局变量
  cates:[],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /**
     * 尝试缓存数据 减少前后端交互所浪费的事件
     *  1. 每次请求数据 由于数据量非常大 导致接口请求时间超过1s
     *  2. 缓存数据 可以不用频繁的去请求数据(常规操作中,一般是由后台设置在响应头中的接口数据是否缓存的)
     * 
     * 前端存储 或者缓存
     * 1.存储的位置(本地存储)
     *      浏览器和微信小程序的本地存储
     *            浏览器 1. window.localStorage.setIte("key","value");
     *            微信小程序2. wx.setStorageSync("key","value")
     *      在浏览器中 存贮的数据必须要转换成自付出
     *      在小程序的本地存贮中 不需要进行任何的转换 存的数据类型是什么 取出来的就是什么
     * 2.存储的内容 
     *        {time: Date(),data:[...cates]}
     * 
     * 
     * 思路
     * 1.页面刚开始加载的时候判断一下本地存储中是否存在数据
     * 2.如果没有数据, 发送请求
     * 3.如果存在数据 判断一下旧数据有没有过期 如果没有过期则直接使用 已经过期 重新请求新的数据
     */
    let cates = wx.getStorageSync('cates');
    console.log("====>",cates)
    if(!cates){//当本地没有任何数据存贮的时候 进行获取数据
      this.getCategories()
    }else{//本地存在缓存数据
      //判断数据是否过期
      if((+new Date() - cates.time)>100000){//设置10s过期时间并且进行判断
        //当超时之后 重新获取数据
        this.getCategories();
      }else{
        this.cates = cates.data;
        //获取左侧按钮内容
        let leftMenuList = this.cates.map(item => item.cat_name);
        //获取右侧商品分类列表
        let rightDataList = this.cates[0].children;
        this.setData({
          leftMenuList,
          rightDataList
        })
      }
    }
  },

  getCategories: async function(){
    let {data} = await wx.categoriesApi.getCategories();
    this.cates = data.message;
    //将数据存储到本地存储
    wx.setStorageSync("cates",{
      time:+new Date(),
      data:this.cates})
    //获取左侧按钮内容
    let leftMenuList = this.cates.map(item => item.cat_name);
    //获取右侧商品分类列表
    let rightDataList = this.cates[0].children;
    this.setData({
      leftMenuList,
      rightDataList
    })
  },

  //监听当左侧按钮列表被点击的事件
  onItemClick(e){
    let {index} = e.currentTarget.dataset;
    let rightDataList = this.cates[index].children;
    this.setData({
      rightDataList,
      currentIndex: index,
      scrollTop: 0
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})